<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>使用form</title>
	<link rel="stylesheet" href="../../libs/layui/css/layui.css">
</head>

<body>
	<div class="layui-card">
		<div class="layui-card-header">
			编辑与提交
		</div>
		<div class="layui-card-body">
			<form class="layui-form" lay-filter="formVal">
			<!-- <form class="layui-form layui-form-pane"> -->
				<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
				<div class="layui-row layui-col-space30">
					<div class="layui-col-md12">
						<div class="layui-form-item">
							<label class="layui-form-label">用户名</label>
							<div class="layui-input-block">
								<input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="username" lay-verType="tips">
								<blockquote class="layui-elem-quote">
									required：注册浏览器所规定的必填字段<br>
									verify：注册form模块需要验证的类型<br>
									class="layui-input"：layui.css提供的通用CSS类<br>
								</blockquote>
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">下拉选择框</label>
							<div class="layui-input-block">
								<select name="city" lay-verify="">
									<option value="">请选择一个城市</option>
									<option value="010">北京</option>
									<option value="021">上海</option>
									<option value="0571">杭州</option>
								</select>
								<blockquote class="layui-elem-quote">
									上述option的第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项（存在value值）作为默认选中项。你可以在option的空值项中自定义文本，如：请选择分类。
								</blockquote>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">禁用选项</label>
							<div class="layui-input-block">
								<select name="city" lay-verify="">
									<option value="010">北京</option>
									<option value="021" disabled>上海（禁用效果）</option>
									<option value="0571" selected>杭州</option>
								</select>
								<blockquote class="layui-elem-quote">
									通过设定 selected 来设定默认选中项
								</blockquote>
							</div>
						</div>
						<!-- <div class="layui-form-item" pane> -->
						<div class="layui-form-item">
							<label class="layui-form-label">选项分组</label>
							<div class="layui-input-block">
								<select name="quiz">
									<option value="">请选择</option>
									<optgroup label="城市记忆">
										<option value="你工作的第一个城市">你工作的第一个城市？</option>
									</optgroup>
									<optgroup label="学生时代">
										<option value="你的工号">你的工号？</option>
										<option value="你最喜欢的老师">你最喜欢的老师？</option>
									</optgroup>
								</select>
								<blockquote class="layui-elem-quote">
									通过 optgroup 标签给select分组
								</blockquote>
							</div>
						</div>
						<!-- <div class="layui-form-item" pane> -->
						<div class="layui-form-item">
							<label class="layui-form-label">选项搜索</label>
							<div class="layui-input-block">
								<select name="city" lay-verify="" lay-search>
									<option value="010">layer</option>
									<option value="021">form</option>
									<option value="0571" selected>layim</option>
								</select>
								<blockquote class="layui-elem-quote">
									通过设定属性 lay-search 来开启搜索匹配功能
								</blockquote>
								<blockquote class="layui-elem-quote">
									属性selected可设定默认项<br>
									属性disabled开启禁用，select和option标签都支持
								</blockquote>
							</div>
						</div>

						<!-- <div class="layui-form-item" pane> -->
						<div class="layui-form-item">
							<label class="layui-form-label">单选框</label>
							<div class="layui-input-block">
								<input type="radio" name="sex" value="nan" title="男">
								<input type="radio" name="sex" value="nv" title="女" checked>
								<input type="radio" name="sex" value="" title="中性" disabled>
								<blockquote class="layui-elem-quote">
									属性title可自定义文本<br>
									属性disabled开启禁用<br>
									设置value="xxx"可自定义值<br>
									否则选中时返回的就是默认的on
								</blockquote>
							</div>
						</div>
						<!-- <div class="layui-form-item" pane> -->
						<div class="layui-form-item">
							<label class="layui-form-label">复选框</label>
							<div class="layui-input-block">
								<!-- 默认风格 -->
								<input type="checkbox" name="" title="写作" checked>
								<input type="checkbox" name="" title="发呆">
								<input type="checkbox" name="" title="禁用" disabled>

								<!-- 原始风格 -->
								<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
								<input type="checkbox" name="" title="发呆" lay-skin="primary">
								<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>

								<blockquote class="layui-elem-quote">
									属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title） <br>
									属性checked可设定默认选中 <br>
									属性lay-skin可设置复选框的风格 <br>
									设置value="1"可自定义值，否则选中时返回的就是默认的on
								</blockquote>
							</div>
						</div>
						<!-- <div class="layui-form-item" pane> -->
						<div class="layui-form-item">
							<label class="layui-form-label">开关</label>
							<div class="layui-input-block">
								<input type="checkbox" name="xxx" lay-skin="switch">
								<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
								<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
								<input type="checkbox" name="aaa" lay-skin="switch" disabled>
								<blockquote class="layui-elem-quote">
									属性checked可设定默认开<br>
									属性disabled开启禁用<br>
									属性lay-text可自定义开关两种状态的文本<br>
									设置value="1"可自定义值，否则选中时返回的就是默认的on
								</blockquote>
							</div>
						</div>
						<div class="layui-form-item layui-form-text">
							<label class="layui-form-label">请填写描述</label>
							<div class="layui-input-block">
								<textarea name="" placeholder="请输入" class="layui-textarea" required lay-verify="required" lay-verType="tips"></textarea>
								<blockquote class="layui-elem-quote">
									class="layui-textarea"：layui.css提供的通用CSS类
									用于定义异常提示层模式lay-verType="tips（吸附层）/alert（对话框）/msg（默认）"
								</blockquote>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit lay-filter="submitDetial">立即提交</button>
								<button type="reset" class="layui-btn layui-btn-primary">重置</button>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
		<script src="../../libs/layui/layui.js"></script>
	<script src="../../js/NOTE-MGT/form.js"></script>
</body>

</html>
